<template>
  <view :class="['container', { dark: theme == 'dark' }]">
    <view :class="['flex', 'top', 'fixedTop', 'funs', { darksss: theme == 'dark' }]">
	  <u-search
        shape="square"
        bg-color="#FFF"
        search-icon-color="#909399"
        placeholder-color="#909399"
        :show-action="false"
        :animation="true"
        :placeholder="$t('bico.W388')"
        v-model="search"
      ></u-search>
    </view>

    
   
    <!-- 加一条线 -->
    <u-line color="#5559691f"></u-line>
    <!-- 间隔槽 -->
    <u-gap
      height="20"
      bg-color=""
    ></u-gap>

   
	<!-- 期货列表内容 -->
    <view :class="['list', 'funs', { darksss: theme == 'dark' }]">
      <!-- 加一条线 -->
      <u-line color="#5559691f"></u-line>
      <!-- 间隔槽 -->
      <u-gap
        height="20"
        bg-color=""
      ></u-gap>
      <view class="list">
        <view
          class="flex listItem"
          v-for="(item, i) in futuresList"
          :key="i"
          @click="linkKline(current, item.symbol)"
        >
          <view class="itemLeft">
            <!-- <image
              :src="item.img"
              style="width: 8vw; height: 8vw; margin-right: 2vw; border-radius: 10vw"
            ></image> -->
            <view>
              <view class="itemLeftView1">
                {{ item.symbol.split('/')[0] }}<text>/{{ item.symbol.split('/')[1] }}</text>
              </view>
              <view class="itemLeftView2">vol:{{ item.high }}</view>
            </view>
          </view>
      
          <view :class="['itemRight']">
            <view class="itemCenter">
              <view
                :class="['itemCenterView1']"
                :style="{
                  color: theme == 'dark' ? '#fff' : '#121212'
                }"
              >
                ${{ item.close }}
              </view>
              <view
                v-if="false"
                class="itemLeftView2"
                >≈ {{ item.cny }} CNY</view
              >
            </view>
            <view
              class="riseFall"
              :class="[parseFloat(item.rose) < 0 ? 'orange' : 'green']"
            >
              <!-- <image
                class="fallDrastically1"
                :src="
                  parseFloat(item.rose) < 0
                    ? '../../static/image/fallDrastically1.png'
                    : '../../static/image/fallDrastically2.png'
                "
              ></image> -->
              {{ parseFloat(item.rose) < 0 ? '' : '+' }}{{ (item.rose - 0) | toFixed2 }}%
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { huobiTicket, info, commonNewsList, optionSymbolInfo } from '../../common/apiString.js';

var socketInstance;
export default {
  name: 'childMarket',
  data() {
    return {
	  futuresList:[],
      optionList: [],
      search: '',
      tagAcitveIndex: 0,
      jxbdIndex: 0,
      jxbdIndex: 0,
      symTagIndex: 0,

      noticeList: [],
      zfList: [], //涨幅榜

      changeIndex: 1,
      changeName: 'symbol',
      ttt: null,
      symbolTypeList: [
        { name: '币币', type: '0' },
        { name: '合约', type: '1' }
      ],
      isActive: 0,
      marketLists: [],
      fiat_convert_cny: 6.8,
      legal_name: '',
      isfilter1: 1,
      isfilter2: 0,
      isfilter3: 0
    };
  },
  filters: {
    toFixed2: function (value) {
      value = Number(value);
      return value.toFixed(2);
    },
    toFixed3: function (value) {
      value = Number(value);
      return value.toFixed(3);
    },
    toFixed4: function (value) {
      value = Number(value);
      return value.toFixed(4);
    }
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  onPullDownRefresh() {
    this.changeFooter();
    this.getNoticeList();
    this.getList();
	this.getFutures()
  },
  onLoad(e) {
    uni.setNavigationBarTitle({
      title: this.$t('bico.W393')
    });
    this.$utils.setTheme(this.theme);
    this.changeFooter();
    this.getNoticeList();
  },
  onShow() {
    var that = this;
    this.ttt = setInterval(function () {
      that.socketFun();
    }, 2000);
  },
  mounted() {
    let that = this;
    this.getList();
	this.getFutures()

    // this.ttt=setTimeout(()=>{
    // 	this.socketFun()
    // },100)
  },
  onHide() {
    clearTimeout(this.ttt);
  },
  beforeDestroy() {
    clearInterval(this.ttt);
  },

  methods: {
	// 获取期权数据
	getFutures(){
		// this.$utils.initData(
		//   {
		//     url: huobiTicket,
		//     data: {
		//       type: 3
		//     },
		//     type: 'post'
		//   },
		//   (res, msg) => {
		//     this.futuresList = res;
		// 	console.log(111,res)
		//   }
		// );
		this.$utils.initDataToken(
		  {
		    url: optionSymbolInfo,
		    type: 'get'
		  },
		  (res, msg) => {
		    this.futuresList = res.data;
			console.log(111,res)
		  }
		);
	},
    changeFooter() {
      uni.setTabBarItem({
        index: 0,
        text: this.$t('tabBar.index')
      });
      uni.setTabBarItem({
        index: 1,
        text: this.$t('tabBar.business')
      });
      uni.setTabBarItem({
        index: 2,
        text: this.$t('tabBar.perpetual')
      });
      uni.setTabBarItem({
        index: 3,
        text: this.$t('tabBar.agreements')
      });
      uni.setTabBarItem({
        index: 4,
        text: this.$t('tabBar.mine')
      });
    },
    linkKline(type, symbol, item) {
      uni.setStorageSync('klineSymbol', symbol);
      if (type == 5) {
        uni.navigateTo({
          url: '/pages/Option/Option?id=' + item.id //期权秒合约
        });
      }
      if (type == 1) {
        uni.switchTab({
          url: '/pages/lever/lever'
        });
      }
      if (type == 0) {
        uni.switchTab({
          url: '/pages/trade/trade'
        });
      }
    },
    symTagClick(index) {
      if (index == this.symTagIndex) return;
      this.symTagIndex = index;
    },
    toAdv() {
      uni.navigateTo({
        url: '/pages/home/news'
      });
    },
    //公告
    getNoticeList() {
      this.$utils.initData({ url: commonNewsList, data: { c_id: 4 }, type: 'POST' }, (res, msg) => {
        this.noticeList = res.records;
        // if(res.records.length){
        // 	this.noticeList = res.records[0]
        // }else{
        // 	this.noticeList = {
        // 		content:'暂无公告'
        // 	}
        // }
      });
    },

    socketFun() {
      this.getList();
    },

    // 过滤
    filterList(name, isflag) {
      this.marketLists.sort(function (i, j) {
        if (i[name] == 'AI/USDT') {
          return 'E'.charCodeAt(0) - j[name].charCodeAt(0);
        }
        if (j[name] == 'AI/USDT') {
          return 'E'.charCodeAt(0) - i[name].charCodeAt(0);
        }
        if (name == 'symbol') {
          if (isflag == 1) {
            return i[name].charCodeAt(0) - j[name].charCodeAt(0);
          } else {
            return j[name].charCodeAt(0) - i[name].charCodeAt(0);
          }
        } else {
          if (isflag == 1) {
            return i[name] - j[name];
          } else {
            return j[name] - i[name];
          }
        }
      });
    },
    // 点击切换
    tapFilters(e, name) {
      this.changeIndex = e;
      this.changeName = name;
      // console.log(e,name);
      if (e == 1) {
        this.isfilter2 = 0;
        this.isfilter3 = 0;
        this.isfilter1 = this.isfilter1 == 1 ? 2 : 1;
        this.filterList(name, this.isfilter1);
      }
      if (e == 2) {
        this.isfilter1 = 0;
        this.isfilter3 = 0;
        this.isfilter2 = this.isfilter2 == 1 ? 2 : 1;
        this.filterList(name, this.isfilter2);
      }
      if (e == 3) {
        this.isfilter2 = 0;
        this.isfilter1 = 0;
        this.isfilter3 = this.isfilter3 == 1 ? 2 : 1;
        this.filterList(name, this.isfilter3);
      }
    },
    tapFilters2(e, name) {
      // this.changeIndex=e
      // this.changeName = name
      // console.log(e,name);
      if (e == 1) {
        this.isfilter2 = 0;
        this.isfilter3 = 0;
        this.isfilter1 = this.isfilter1;
        this.filterList(name, this.isfilter1);
      }
      if (e == 2) {
        this.isfilter1 = 0;
        this.isfilter3 = 0;
        this.isfilter2 = this.isfilter2;
        this.filterList(name, this.isfilter2);
      }
      if (e == 3) {
        this.isfilter2 = 0;
        this.isfilter1 = 0;
        this.isfilter3 = this.isfilter3;
        this.filterList(name, this.isfilter3);
      }
    },
    // 行情列表
    getList() {
      var that = this;
      //var type=0
      //uni.showLoading();
      that.$utils.initData(
        { url: huobiTicket, data: { type: that.tagAcitveIndex }, type: 'post' },
        (res, msg) => {
          that.marketLists = [];
          var str2 = that.search.toLocaleUpperCase();
          res.forEach((item, index) => {
            if (item.symbol.search(str2) != -1) {
              that.marketLists.push(item);
            }
          });
          this.setZfList(that.marketLists);
          this.tapFilters2(this.changeIndex, this.changeName);
          try {
            uni.stopPullDownRefresh();
          } catch (e) {}
          // if(res.length>0){
          // 	that.legal_name=res[0].symbol;
          // }
          //uni.hideLoading();
        }
      );
    },
    //设置涨幅榜
    setZfList(list) {
      // let d = list.filter(v=>v.rose>0);
      let d = list.slice(0, 9);
      let data = [];
      for (let i = 0; i < d.length; i += 3) {
        data.push(d.slice(i, i + 3));
      }
      this.zfList = data;
    },
    // 获取自选列表
    getCollectList() {
      this.$utils.initDataToken({ url: 'user/zixuan_list' }, res => {
        uni.stopPullDownRefresh();
        // this.marketLists=res;
        // if(res.length>0){
        // 	this.legal_name=res[0].name;
        // }
      });
    },
    changeTab(e, name = '') {
      this.isfilter3 = 0;
      this.isfilter2 = 0;
      this.isfilter1 = 1;
      this.isActive = e;
      this.tagAcitveIndex = e;
      if (e == 5) {
        this.$utils.initDataToken(
          {
            url: optionSymbolInfo,
            type: 'get'
          },
          (res, msg) => {
            this.optionList = res.data;
          }
        );
      } else {
        this.getList();
      }
    }
  }
};
</script>
<style scoped>
.list {
  padding: 0rpx 0;
}
.listItem {
  padding: 16rpx 0;
  border-bottom: solid 0vw #5559690f;
  justify-content: space-between;
}
.itemLeftView1 {
  font-size: 14px;
  font-weight: 400;
  font-family: Times New Roman, Times, serif;
}

.itemLeftView1 > text {
  font-size: 14px;
  font-weight: 400;
}

.itemLeft {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fixedTop {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.flex {
  display: flex;
  align-items: center;
}
.list {
  padding: 20rpx 32rpx 80rpx 32rpx;
}
.listItem {
  padding: 24rpx 0;
  justify-content: space-between;
}
.item1 {
  width: 40%;
}
.item2 {
  flex: 1;
  //text-align: center;
}
.item1V1 {
  align-items: baseline;
}
.item1V11 {
  margin-right: 1vw;
  font-size: 3.6vw;
  font-weight: 400;
  font-family: Times New Roman, Times, serif;
}
.item1V12 {
  font-size: 3.6vw;
  font-weight: 400;
  font-family: Times New Roman, Times, serif;
}
.item1V2 {
  padding-top: 4px;
  color: #999;
  font-size: 12px;
}
.item2V1 {
  font-size: 3.6;
  font-weight: 600;
}
.item3 {
  font-weight: 600;
  color: #fff;
  width: 64px;
  border-radius: 4px;
  text-align: center;
  padding: 7px 0;
  font-size: 14px;
}
.upb {
  background-color: #03ad90;
}
.downb {
  background-color: #cd3d58;
}

.symTags {
  padding: 0 32rpx 0;
  box-shadow: 0 16rpx 20rpx #eee;
  justify-content: space-around;
}
.darkddd {
  box-shadow: 0 0 24rpx rgba(234, 234, 234, 0.2);
}
.symTag {
  font-size: 14px;
  font-weight: 400;
  padding: 20rpx 20rpx 20rpx;
  border-bottom: solid 6rpx transparent;
}
.symTagActive {
  border-bottom: solid 6rpx #3e38ec;
}
.jxbd {
  padding: 0px 2vw 0px;
}
.jxbdItem {
  font-size: 3.4;
  margin-right: 0vw;
  font-weight: 400;
  width: 50%;
  border-radius: 1vw;
  text-align: center;
  padding: 2vw 0;
}
.jxbdAcitve {
  color: #fff;
  background-color: #205fec;
}
.siist {
  flex: 1;
  text-align: center;
}
.siist2 {
  border-left: solid 1rpx #ddd;
  border-right: solid 1rpx #ddd;
}
.swi1,
.swi2,
.swi22 {
  justify-content: center;
}
.icon-diagonal-arrow-right-up-outline {
  color: #27af82;
  font-size: 36rpx;
}
.swi2 > view {
  color: #27af82;
  font-size: 14px;
  font-weight: 400;
  margin-right: 12rpx;
}
.swi22 > view {
  color: #d74e5a;
  font-size: 14px;
  font-weight: 400;
  margin-right: 12rpx;
}
.icon-diagonal-arrow-right-down-outline {
  color: #d74e5a;
  font-size: 36rpx;
}
.swi3 {
  color: #999;
  font-size: 26rpx;
}

.zfbt {
  font-size: 3.6vw;
  font-weight: 400;
  padding: 14vw 0 4vw 4vw;
}
.lind {
  padding: 0 32rpx;
  margin-top: -20rpx;
}
.lindBox {
  padding: 16rpx 28rpx;
  width: 100%;
  box-shadow: 0 0 14rpx #ddd;
  border-radius: 40rpx;
}
.lindBoxsss {
  border-bottom: solid 0.5px #36373e36;
}
.lindText {
  font-weight: normal;
  font-size: 28rpx;
  padding-left: 40rpx;
}
.sw {
  position: relative;
  top: -25px;
  padding: 126px 0px 10px 16px;
  overflow-y: scroll;
}
.swItem {
  margin-right: 30rpx;
  padding: 20rpx 60rpx 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 0 20rpx #aaa;
  border-radius: 10rpx;
  position: relative;
}
.darkccc {
  background: #061623 !important;
  top: 10rpx;
  box-shadow: 0 0 24rpx rgba(234, 234, 234, 0.2);
}
.swItemIcon {
  position: absolute;
  right: 0;
  top: 0;
}
.swItemIcon > image {
  width: 30rpx;
  height: 36rpx;
}
.swItemV1 {
  align-items: baseline;
}
.swItemV11 {
  margin-right: 4px;
  font-size: 3.6vw;
  font-weight: 400;
  font-family: Times New Roman, Times, serif;
}
.swItemV12 {
  font-size: 3.6vw;
  font-weight: 400;
  font-family: Times New Roman, Times, serif;
}
.swItemV2 {
  font-weight: 400;
  font-size: 14px;
  padding: 6px 0;
}
.swItemV3 {
  font-size: 12px;
  padding-bottom: 6px;
}
.swItemV4 {
  color: #999;
  font-size: 26rpx;
  width: 130px;
}
.red {
  color: #ffa500;
}

.top {
  color: #fff;
  padding: 10vw 4vw 4vw;
  justify-content: space-between;
  background-color: #3e38ec;
}
.tags {
  align-items: baseline;
}
.tag {
  margin-right: 40rpx;
  font-size: 14px;
  font-weight: 400;
}
.tagAcitve {
  font-size: 14px;
  font-weight: 400;
}
.icon-search {
  font-size: 18px;
  font-weight: 400;
  margin-right: 40rpx;
}
.icon-lingdang1 {
  font-size: 24px;
}
.u-action {
  color: #fff;
}
.tvngp {
  position: relative;
  left: 6.5vw;
}
</style>
